<template>
    <echartHomeItem :echartData="echartData" type="1"></echartHomeItem>
    <view class="box-total">
        <view class="count">{{ yhdTotalCount }}</view>
        <view class="title">隐患点总数</view>
    </view>
    <uv-line></uv-line>
    <!-- 左边标题分栏 -->
    <view class="df jsb ac mx-30 my-20">
        <view class="box-left">地区风险排名</view>
    </view>
    <uv-list>
        <uv-list-item :title="item.AdminName" link clickable border @click="townClick(item)"
            v-for="(item, index) in apiSortData" :key="index">
            <template #header>
                <view class="sortnum" :class="'sortnum' + index">
                    {{ index + 1 }}
                </view>
            </template>
            <template #footer>
                <view>{{ item.YinHuanDian }}（个）</view>
            </template>
        </uv-list-item>
    </uv-list>
    <uv-line></uv-line>

    <uv-tabs :list="topSelect" @click="topClick" :activeStyle="{ color: '#3c9cff' }" :scrollable="false"
        lineWidth="100rpx" lineHeight="4rpx" :itemStyle="{ padding: '0', height: '60rpx' }"></uv-tabs>
    <view class="echarts-box">
        <qiun-data-charts type="column" :opts="opts" :chartData="chartsDataColumn" :loadingType="1"
            :errorMessage="errMasageColumn" />
    </view>
</template>

<script lang="ts" setup>
import { GetTownFenBuTeZheng_API, GetTownGuiMoDengJi_API, GetTownStats_API, GetTownWeiXieCaiChan_API, GetTownWeiXieRenKou_API, GetTownXianQingDengJi_API, GetTownZaiHaiLeiXing_API } from '@/server/home';
import echartHomeItem from './components/echart-home-item.vue';
const apiSortData = ref([]);
const yhdTotalCount = ref(0);
const echartData = ref('');
const getTowns = async () => {
    const res = await GetTownStats_API();
    if (res.IsSuccess) {
        const arr = res.Data; //apiResult.getDisasterMap; //dsq test
        apiSortData.value = arr.sort((a, b) => b.YinHuanDian - a.YinHuanDian);
        yhdTotalCount.value = arr
            .map((item) => item.YinHuanDian)
            .reduce((total, num) => total + num);
        const data = arr.map((el) => {
            return {
                name: el.AdminName,
                code: el.AdminCode,
                value: el.YinHuanDian, // 隐患点
                SuBaoDian: el.SuBaoDian,
                WeiXieRenKou: el.WeiXieRenKou,
                WeiXieCaiChan: el.WeiXieCaiChan,
            };
        });
        echartData.value = JSON.stringify(data);
    }
};
onLoad(() => {
    getTowns();
    topClick()
});

const townClick = (val) => {
    uni.navigateTo({
        url: `/pages/home/town/yhd-list?adcode=${val.AdminCode}`,
    })
}

const topSelect = [
    {
        name: '分布特征',
    },
    {
        name: '灾害类型',
    },
    {
        name: '规模等级',
    },
    {
        name: '险情等级',
    },
    {
        name: '威胁人口',
    },
    {
        name: '威胁财产',
    },
]
const chartsDataColumn = ref({})
const errMasageColumn = ref('')
const opts = {
    dataLabel: false,
    update: true,
    padding: [15, 15, 15, 15],
    xAxis: {
        rotateLabel: true,
        rotateAngle: 45,
        fontSize: 12,
        marginTop: 10,
    },
    extra: {
        column: {
            categoryGap: 2,
        },
    },
    legend: {
        show: false,
    },
}
const topClick = async (item = null) => {
    let res
    opts.xAxis.rotateLabel = true
    switch (item?.name) {
        case '分布特征':
            res = await GetTownFenBuTeZheng_API()
            break
        case '灾害类型':
            res = await GetTownZaiHaiLeiXing_API()
            break
        case '规模等级':
            res = await GetTownGuiMoDengJi_API()
            opts.xAxis.rotateLabel = false
            break
        case '险情等级':
            res = await GetTownXianQingDengJi_API()
            opts.xAxis.rotateLabel = false
            break
        case '威胁人口':
            res = await GetTownWeiXieRenKou_API()
            break
        case '威胁财产':
            res = await GetTownWeiXieCaiChan_API()
            break
        default:
            res = await GetTownFenBuTeZheng_API()
            break
    }
    if (res.IsSuccess) {
        const x = res.Data.XData
        const y = res.Data.YData
        if (y.length !== 0 && x.length !== 0) {
            let obj = {
                categories: x,
                series: [
                    {
                        name: '',
                        data: y,
                    },
                ],
            }
            chartsDataColumn.value = JSON.parse(JSON.stringify(obj))
        } else {
            errMasageColumn.value = '暂无数据' + new Date().getSeconds()
        }
    }
}
</script>

<style lang="scss" scoped>
.box-total {
    text-align: center;
    background: #f8fafd;
    padding: 10rpx 0;
    margin: 10rpx 0;
    border-radius: 40rpx;

    .count {
        font-size: 48rpx;
        line-height: normal;
        font-weight: bold;
        color: #2196f3;
    }

    .title {
        font-size: 32rpx;
        line-height: normal;
        color: #2196f3;
    }
}

.sortnum {
    background: #cccccc;
    border-radius: 36rpx;
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
    text-align: center;
    line-height: 36rpx;
    margin: auto 10rpx auto 0px;
    font-size: 24rpx;
}

.sortnum0 {
    background-color: red;
}

.sortnum1 {
    background-color: orange;
}

.sortnum2 {
    background-color: yellow;
}

:deep(.uv-tabs__wrapper__nav__item__text) {
    font-size: 24rpx;
}
</style>
